<template>
    <div class="package">
        <!-- 一个三角形形成的原理 -->
        <div class="triangle">
            <p>等腰三角形</p>
        </div>
    </div>
</template>

<script>
    export default {

    }
</script>

<style scoped>
    .package {
        position: relative;
        width: 400px;
        height: 400px;
    }

    .package p {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
    }

    .triangle {
        width: 0px;
        height: 0px;
        border: 200px solid transparent;
        border-top: 200px solid red;
        /* 
        这显然是一个等腰三角形，我们设置的border都是上下左右三角形的垂直高度
        如果border都相同怎么都不会出现等边三角形ppt里边有说到

        最后正三角形结论
        前提：border-left==border-right
        border-bottom=√3*border-left
         */

    }
</style>